<!--<template>
	<view style="background-color: #fefefe;">
		<my-navbar></my-navbar>
		<view class="appointment-list">
		
			<view v-if="appointmentList.length > 0">
				<u-row>
					<u-col span="12" v-for="(item, index) in appointmentList" :key="index">
						<u-card margin="30rpx 10rpx" :body-style="bodyStyle" :head-style="headStyle">
							<view slot="body">
								<view class="card-title">
									{{item.name}} - {{item.project.join(', ')}}
								</view>
								<view class="card-sub-title">{{item.date}}</view>
								<view class="card-sub-title">电话: {{item.phone}}</view>
								<view class="card-sub-title">患者类型: {{item.type}}</view>
								
								<u-button @click="deleteAppointment(index)" type="error" size="small">删除</u-button>
							</view>
						</u-card>
					</u-col>
				</u-row>
			</view>
			<view v-else class="no-appointments">
				<text>暂无预约信息</text>
			</view>
		</view>
		<my-tabbar></my-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			appointmentList: []  // 用于存储预约信息
		};
	},
	onLoad() {
		// 读取存储的预约信息
		const storedAppointments = uni.getStorageSync('appointmentList');
		if (storedAppointments && Array.isArray(storedAppointments)) {
			this.appointmentList = storedAppointments;  // 获取预约列表并赋值
		}
	},
	methods: {
		// 删除预约信息
		deleteAppointment(index) {
			this.appointmentList.splice(index, 1);  // 从列表中删除对应预约信息
			uni.setStorageSync('appointmentList', this.appointmentList);  // 更新本地存储
		}
	}
};
</script>

<style>
.appointment-list {
	padding: 30rpx;
}

.card-title {
	font-weight: 400;
}

.card-sub-title {
	font-size: 24rpx;
	color: #868686;
}

.no-appointments {
	text-align: center;
	margin-top: 100rpx;
}
</style>
-->
<template>
	<view style="background-color: #fefefe;">
		<!-- 返回按钮 -->
		<u-navbar :is-back="true" height="44" title="提表预约详情" title-size="32" title-color="#000000" :background="background"></u-navbar>
		
		<view class="appointment-list">
			<!-- 展示预约信息 -->
			<view v-if="appointmentList.length > 0">
				<u-row>
					<u-col span="12" v-for="(item, index) in appointmentList" :key="index">
						<u-card :title=" item.name " margin="20rpx 10rpx" :body-style="bodyStyle" :head-style="headStyle">
							<view slot="body" class="card-body">
								<!-- 上部分：姓名和项目 -->
								<view class="card-top">
									<view class="card-title">
										{{ item.name }} - {{ item.project.join(', ') }}
									</view>
								</view>

								<!-- 下部分：其他信息 -->
								<view class="card-bottom">
									<view class="card-sub-title">{{ item.date }}</view>
									<view class="card-sub-title">电话: {{ item.phone }}</view>
									<view class="card-sub-title">患者类型: {{ item.type }}</view>
									 <view class="card-sub-title">
									        提交时间: {{ item.timestamp }}
									    </view>
									<!-- 删除按钮 -->
									<u-button @click="deleteAppointment(index)" type="error" size="small" class="delete-button">取消预约</u-button>
								</view>
							</view>
						</u-card>
					</u-col>
				</u-row>
			</view>
			<!-- 如果没有预约信息 -->
			<view v-else class="no-appointments">
				<text>暂无预约信息</text>
			</view>
		</view>
		<my-tabbar></my-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			appointmentList: []  ,// 用于存储预约信息
			background: {
			  backgroundImage: 'linear-gradient(135deg, #3cccf7 10%, #4ba6cc 100%)',
			}
		};
	},
	onLoad() {
		// 读取存储的预约信息
		const storedAppointments = uni.getStorageSync('appointmentList');
		if (storedAppointments && Array.isArray(storedAppointments)) {
			this.appointmentList = storedAppointments;  // 获取预约列表并赋值
		}
	},
	methods: {
		
		
		// 删除预约信息
		deleteAppointment(index) {
			this.appointmentList.splice(index, 1);  // 从列表中删除对应预约信息
			uni.setStorageSync('appointmentList', this.appointmentList);  // 更新本地存储
		}
	}
};
</script>

<style scoped>
	
.appointment-list {
	padding: 30rpx;
}

.note-card {
	background-color: rgba(255, 255, 255, 0.8); /* 设置半透明白色背景 */
	border-radius: 10rpx;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
	margin-bottom: 15rpx;
}

.card-body {
	padding: 20rpx;
}

.card-top {
	padding-bottom: 15rpx; /* 上部分和下部分之间的间距 */
}

.card-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
}

.card-bottom {
	padding-top: 15rpx; /* 下部分与上部分之间的间距 */
}

.card-sub-title {
	font-size: 26rpx;
	color: #868686;
	margin-top: 10rpx;
}

.delete-button {
	width: 100%;
	margin-top: 15rpx;
}

.no-appointments {
	text-align: center;
	margin-top: 100rpx;
	font-size: 28rpx;
	color: #aaa;
}
</style>

